@{
    ViewBag.Title = Request["ReceivedUserName"] +  "-即时通讯" ;
    }
@section head{
    <link href="@Url.Content("~/Content/JavaScript/packages/kindeditor-4.1.7/themes/chat/chat.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Content/JavaScript/packages/kindeditor-4.1.7/kindeditor-min.js")"  type="text/javascript"></script>
    <script src=""@Url.Content("~/Content/JavaScript/packages/kindeditor-4.1.7/lang/zh_CN.js")" type="text/javascript"></script>
    <script type="text/javascript">
        var editor
        $(document).ready(function () {
            editor = KindEditor.create('#sendContent', {
                resizeType: 0
                , height: '100%'
                , themeType: 'chat'
                , urlType: 'absolute'
                , items: ['fontname', 'fontsize', 'forecolor', 'bold', 'italic', 'underline', 'emoticons', 'image', 'insertfile', 'link']
                , uploadJson: '@Url.Action("keUpload","Tools")?isWatermark=false&savePath=~/UploadData/Chat'
                , afterChange: function () {
                    $('.foottermsg').html(this.count() + ' / 4000');
                }
                , afterCreate: function (id) {
                    var history = $('<a href="javascript:showhistory()" style="height:22px;" class="right" data-options="plain:true,iconCls:\'icon-history\'">历史记录</a>').linkbutton();
                    $('.ke-toolbar').append(history);  //增加聊天记录按钮
                    $('body>.easyui-layout').layout('resize');
                 
                    KindEditor.ctrl(editor.edit.doc, 13, function () {
                        send();
                    });
                }
            });
        });
        function showhistory() {
            var panel = $('body>.easyui-layout').layout('panel', 'east');
           var option=panel.panel('options');
           if (option.closed) {
               var url = '@Url.Action("History")?page=1&rows=20&userName=@Request["ReceivedUserName"]';
               panel.panel({
                   closed: false,
                   width: 300,
                   content: '<iframe src="' + url + '" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>'
               });
               var win = this.frameElement.easyuiWindow;
               if (win) win.window('resize', { width: win.window('options').width + option.width });
           }
           else {
               panel.panel('close');
               var win = this.frameElement.easyuiWindow;
               if (win) win.window('resize', { width: win.window('options').width - option.width });
           }

        }

        this.frameElement.received = function (chat) {
            var now = new Date();
            var sendTime = new Date(chat.SendTime);
            if (sendTime.getFullYear() == now.getFullYear() && sendTime.getMonth() == now.getMonth() && sendTime.getDay() == now.getDay())
                sendTime = sendTime.toLocaleTimeString();
            else
                sendTime = chat.SendTime;

            var msg = '<span class="receivedfrom">' + chat.SendRealName + ' &nbsp;' + sendTime + '</span>'
                      + '<div class="msg">' + chat.Message + '</div>';
            var chatList = $('#chatList');
            chatList.append(msg);
            chatList = chatList[0];
            chatList.scrollTop = chatList.scrollHeight;
        };

        function sendResize(width, height) {
            $('.ke-container').height(height - 2);
            if (editor && editor.edit)
                editor.edit.iframe.height(height-31);
        };
        function send() {
            if (editor.count('text') == 0) {
                show_msg("要发送的内容不能为空", "error");
                return;
            }
            if (editor.count() > 4000) {
                show_msg("内容长度超过最大限制", "error");
                return;
            }
            postModal(undefined, { Message: editor.html() }, function (data) {
                if (data.success == false) {
                    $('#chatList .sendfrom:last').append('<span class="errorstatus">发送失败</span>');
                }
            }, false);

            var msg = '<span class="sendfrom">@OA.BLL.LoginUser.LoginManager.RealName &nbsp;' + new Date().toLocaleTimeString() +  '</span>'
                      + '<div class="msg">' + editor.html() + '</div>';
            var chatList=$('#chatList');
            chatList.append(msg);
            chatList = chatList[0];
            chatList.scrollTop = chatList.scrollHeight;
            editor.html('');
            editor.focus();
        }

    </script>
}
@section body{
<body class="chat_send_body">
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center',border:false">
    <div class="easyui-layout" data-options="fit:true">
        <div id="chatList" data-options="region:'center',border:true">
             
        </div>
        <div data-options="region:'south',border:false,split:true" style=" height:185px;">
            <div class="easyui-layout" data-options="fit:true">
                <div id="content" data-options="region:'center',border:false,onResize:sendResize">
                    <textarea id='sendContent' name="sendContent" style="width:auto;">
                    </textarea>
                </div>
                <div class="footterbtn" data-options="region:'south',border:false">
                     <div class="foottermsg left" ></div>
                     <a href="javascript:CloseMe();" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">关闭</a>
                     <a href="javascript:send();" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" title="Ctrl + Enter" >发送</a>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div id="history" data-options="region:'east',border:true,closed:true,split:true">
  
    </div>
</div>
</body>
}
